Ext.define("TT.inout",{
	parent: null,
	constructor: function () {
		var arg = arguments[0];
		this.parent = arg.parent;
		this.createInoutPanel(arg.id,arg.title); 
    },
    
	createInoutPanel: function(id, title){
		var that = this;
		var panel = tabs[id];
		if(!panel){	
			panel = Ext.create('Ext.panel.Panel', {
			    title:title,
			    layout:"border",
			    closable:true,
			    onRemoved: function(destroying) {
			    	delete tabs[id];
			    },
			    items:[
			    	{
			    		title:"", 
			    		region:"north", 
			    		height:60
			    	},
			    	{	
			    		title:"来自", 
			    		region:"west",
			    		width:220,
			    		collapsible: true,
			    		autoScroll:true,
			    		layout: {
			    	        type: 'vbox',
			    	        align: 'middle'
			    	    }
			    	},
			    	{
			    		title:"", 
			    		region:"center",
			    		layout:"fit"
			    	},
			    	{
			    		title:"去往", 
			    		region:"east", 
			    		width:220,
			    		collapsible: true,
			    		autoScroll:true,
			    		layout: {
			    	        type: 'vbox',
			    	        align: 'middle'
			    	    }
			    	}
			    	/*,
			    	{
			    		title:"输入/输出介绍", 
			    		region:"south", 
			    		height:100,
			    		autoScroll:true
			    	}*/
			    	
			    ]
			});
			this.parent.add(panel);
			tabs[id] = panel;//{101, p}

			Ext.Ajax.request({
			    url: "inout/"+(id-100)+".json",
			    params: {
			        id: 2
			    },
			    success: function(response){
			    	var text = response.responseText;
			        var inout = Ext.JSON.decode(text).inout;
			        var item = panel.items.items;
			        var north = item[0];
			        var west = item[1];
			        var center = item[2];
			        var east = item[3];
			        //var south = item[4];
			        
			        var html ="<div style='padding:5px;text-align:center'><h2 class=\"x-panel-header\">"+inout.id+", "+inout.name+"</h2></div>";
			        north.body.update(html);
			        //north.add(html);
			        //html = "<div style='padding:10px;'>";
			        for(var i=0;i<inout.fromProcesses.length;i++){
			        	//html += "<li><a href=\"javascript:createProcessPanel("+(Number(inout.fromProcesses[i].id)+10000)+", '"+inout.fromProcesses[i].displayName+"')\">"+inout.fromProcesses[i].displayName+"</a></li>";
			        	west.add({
			        		xtype: 'button',
			                forId: 'myFieldId',
			                idx: i,
			                text: inout.fromProcesses[i].displayName,
			                margin: '3',
			                handler: function() {
			                	Ext.create("TT.process",{id:Number(inout.fromProcesses[this.idx].id)+10000, title:inout.fromProcesses[this.idx].displayName, parent:that.parent});
				            }
			            });
			        }
			        //html += "</div>";
			        //west.body.update(html);
			        
			        center.add(that.createInoutGrid(id));
			        
//			        html = "<div style='padding:10px;'>";
			        for(var i=0;i<inout.toProcesses.length;i++){
			        	//html += "<li><a href=\"javascript:createProcessPanel("+(Number(inout.toProcesses[i].id)+10000)+", '"+inout.toProcesses[i].displayName+"')\">"+inout.toProcesses[i].displayName+"</a></li>";
			        	east.add({
			                xtype: 'button',
			                forId: 'myFieldId',
			                idx: i,
			                text: inout.toProcesses[i].displayName,
			                margin: '3',
			                listeners: {
			                	click:function(){
			                		Ext.create("TT.process",{id:Number(inout.toProcesses[this.idx].id)+10000, title:inout.toProcesses[this.idx].displayName, parent:that.parent});
			                	}
				            }
			            });
			        }
//			        html += "</div>";
//			        east.body.update(html);
			        
			        /**
			        html = "<div style='padding:10px;'>";
			        html += inout.description;
			        html += "</div>";
			        south.body.update(html);
			        */
			    }
			});
		}
		this.parent.setActiveTab(panel);
	},
	
     createInoutGrid: function(id){
    	var that = this;
    	var store = Ext.create('Ext.data.Store', {
    	    storeId:'simpsonsStore',
    	    fields:['name', 'email', 'phone', 'date'],//model
    	    data:{
    	    	'items':[
    		        { 'name': 'Lisa',  "email":"lisa@simpsons.com",  "phone":"555-111-1224", "date":"555-111-1224"  },
    		        { 'name': 'Bart',  "email":"bart@simpsons.com",  "phone":"555-222-1234", "date":"555-111-1224"  },
    		        { 'name': 'Homer', "email":"homer@simpsons.com",  "phone":"555-222-1244",  "date":"555-111-1224"  },
    		        { 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254",  "date":"555-111-1224"  }
    	        ]
    	    },
    	    proxy: {
    	        type: 'memory',
    	        reader: {
    	            type: 'json',
    	            root: 'items'//ExtJS5: rootProperty:'items'
    	        }
    	    }
    	});

    	var gridPanel = Ext.create('Ext.grid.Panel', {
    	    store: Ext.data.StoreManager.lookup('simpsonsStore'),
    	    tbar:[
    	          {
    	        	  text:"添加",
    	        	  handler:function(){
    	        		  that.showAddPanel(1);
    	        	  }
    	          },
    	          {
    	        	  text:"删除",
    	        	  handler:function(){
    	        		  that.showDeletePanel();
    	        	  }
    	          },
    	          {
    	        	  text:"上传",
    	        	  handler:function(){
    	        		  that.showUploadPanel();
    	        	  }
    	          },
    	          {
    	        	  text:"上传",
    	        	  handler:function(){
    	        		  that.showTemplate(id);
    	        	  }
    	          }
    	    ],
    	    columns: [
    	        { 	
    	        	text: 'Name',  
    	        	dataIndex: 'name', 
    	        	editor: {
    					xtype: 'textfield',
    					allowBlank: false
    				}
    	        },
    	        { text: 'Email', dataIndex: 'email', flex: 1,editor: 'textfield' },
    	        { text: 'Phone', dataIndex: 'phone',editor: 'textfield' },
    	        { text: 'Date', dataIndex: 'date',editor: 'datefield' }
    	    ],
    	    selType: 'rowmodel',
    	    /*plugins: [
    	        Ext.create('Ext.grid.plugin.RowEditing', {
    	            clicksToEdit: 1
    	        })
    	    ],*/
    	    dockedItems: [{
    	        xtype: 'pagingtoolbar',
    	        store: store,   // same store GridPanel is using
    	        dock: 'bottom',
    	        displayInfo: true
    	    }]
    		/*
    	    selType: 'cellmodel',
    	    plugins: [
    	        Ext.create('Ext.grid.plugin.CellEditing', {
    	            clicksToEdit: 1
    	        })
    	    ]*/
    	});
    	return gridPanel;
    },


    showAddPanel: function(id){
    	var formPanel = Ext.create('Ext.form.Panel', {
    	    title: 'Simple Form',
    	    bodyPadding: 5,
    	    width: 350,

    	    // The form will submit an AJAX request to this URL when submitted
    	    url: 'save-form.php',

    	    // Fields will be arranged vertically, stretched to full width
    	    layout: 'anchor',
    	    defaults: {
    	        anchor: '100%'
    	    },

    	    // The fields
    	    defaultType: 'textfield',
    	    items: [{
    	        fieldLabel: 'First Name',
    	        name: 'first',
    	        allowBlank: false
    	    },{
    	    	xtype: 'textareafield',
    	        fieldLabel: 'Last Name',
    	        name: 'last',
    	        allowBlank: false
    	    }],

    	    // Reset and Submit buttons
    	    buttons: [{
    	        text: 'Reset',
    	        handler: function() {
    	            this.up('form').getForm().reset();
    	        }
    	    }, {
    	        text: 'Submit',
    	        formBind: true, //only enabled once the form is valid
    	        disabled: true,
    	        handler: function() {
    	            var form = this.up('form').getForm();
    	            if (form.isValid()) {
    	                form.submit({
    	                    success: function(form, action) {
    	                       Ext.Msg.alert('Success', action.result.msg);
    	                    },
    	                    failure: function(form, action) {
    	                        Ext.Msg.alert('Failed', action.result.msg);
    	                    }
    	                });
    	            }
    	        }
    	    }]
    	});
    	
    	Ext.Ajax.request({
    	    url: "artifact/template/"+id+".json",
    	    params: {
    	        id: 2
    	    },
    	    success: function(response){
    	    	var text = response.responseText;
    	        var template = Ext.JSON.decode(text).template;
    	        //var items = formPanel.items;
    	        for(var i=0;i<template.attributes.length;i++){
    	        	formPanel.add({
    	    	    	xtype: template.attributes[i].attributeType,
    	    	        fieldLabel: template.attributes[i].attributeName,
    	    	        name: 'last',
    	    	        allowBlank: false
    	    	    });
    	        }
    	       
    	    }
    	});
    	Ext.create('Ext.window.Window', {
    	    title: 'Hello',
    	    height: 600,
    	    width: 800,
    	    layout: 'fit',
    	    items: [formPanel]
    	}).show();
    }

    , showUploadPanel: function(){
    	
    	Ext.create('Ext.window.Window', {
    	    title: 'Hello',
    	    height: 200,
    	    width: 400,
    	    layout: 'fit',
    	    items: {  // Let's put an empty grid in just to illustrate fit layout
    	        xtype: 'grid',
    	        border: false,
    	        columns: [{header: 'World'}],                 // One header just for show. There's no data,
    	        store: Ext.create('Ext.data.ArrayStore', {}) // A dummy empty data store
    	    }
    	}).show();
    }

    , showDeletePanel: function(){
    	Ext.Msg.show({
    	    title:'Save Changes?',
    	    message: 'You are closing a tab that has unsaved changes. Would you like to save your changes?',
    	    buttons: Ext.Msg.YESNOCANCEL,
    	    icon: Ext.Msg.QUESTION,
    	    fn: function(btn) {
    	        if (btn === 'yes') {
    	            console.log('Yes pressed');
    	        } else if (btn === 'no') {
    	            console.log('No pressed');
    	        } else {
    	            console.log('Cancel pressed');
    	        } 
    	    }
    	});
    }, showTemplate: function(id){
    	Ext.create("TT.template",{id:id}).window.show();
    }
});